<template>
  <!-- 窗口内容 -->
  <a-modal
    :open="props.modelVisible"
    title="新建任务"
    ok-text="确认"
    cancel-text="取消"
    @ok="onOk"
    @cancel="
      formRef.resetFields();
      emit('update:modelVisible', false);
    "
    :maskClosable="true"
  >
    <!-- 表单内容 -->
    <a-form
      ref="formRef"
      :model="formState"
      name="form_in_modal"
      :rules="rules"
      :label-col="{ style: { width: '90px' } }"
      AutoComplete="off"
    >
      <a-form-item name="taskName" label="任务名称">
        <a-input v-model:value="formState.taskName" placeholder="输入任务名称" allow-clear />
      </a-form-item>

      <a-form-item name="taskType" label="任务类型">
        <a-select ref="select" v-model:value="formState.taskType" placeholder="请选择任务">
          <a-select-option :value="0" v-if="projectType === 2">课程任务</a-select-option>
          <a-select-option :value="1">需求任务</a-select-option>
          <a-select-option :value="2">开发任务</a-select-option>
          <a-select-option :value="3">测试任务</a-select-option>
          <a-select-option :value="4">缺陷任务</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item name="courseId" label="所属课程" v-if="projectType === 2">
        <a-select
          :field-names="{ label: 'courseName', value: 'courseId', options: 'children' }"
          v-model:value="formState.courseId"
          :options="props.courseList"
          placeholder="请选择课程"
          allow-clear
        >
        </a-select>
      </a-form-item>

      <a-form-item name="taskDescription" label="任务描述">
        <a-textarea
          v-model:value="formState.taskDescription"
          :auto-size="{ minRows: 2, maxRows: 4 }"
          allowClear
        />
      </a-form-item>

      <!-- <div style="display: flex; width: 100%" v-for="(item, index) in formState.attachmentList" :key="index"
                class="deliverable-item">
                <a-form-item :name="['attachmentList', index, 'attachmentName']" label="附件">
                    <a-input v-model:value="formState.attachmentList[index].attachmentName" />
                </a-form-item>
                <a-form-item :name="['attachmentList', index, 'attachmentDoc']" style="margin-left: 10px; width: 100%"
                    label="交付物模板">
                    <a-upload v-model:file-list="item.attachmentUrl" name="file" action="" @change="handleChange">
                        <a-button>
                            点击上传文件
                        </a-button>
                    </a-upload>
                </a-form-item>
                <a-button style=" margin-left: 10%;display: flex;justify-content: center;" danger shape="circle"
                    @click="deleteAttachment(index)">
                    <svg-icon class="icon" name="delete" />
                </a-button>
            </div>

            <a-form-item label="附件">
                <a-button @click="addAttachment" type="primary" shape="circle"
                    style="display: flex;justify-content: center;">
                    <svg-icon class="icon" name="add" />
                </a-button>
            </a-form-item> -->
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { reactive, ref, toRaw, computed } from 'vue';
import type { FormInstance, UploadChangeParam } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { UnwrapRef } from 'vue';
import TaskDao from '@/daos/task_dao';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();

const taskDao = new TaskDao();

//接口定义
interface FormState {
  taskName: string; //任务名
  projectId: number; //项目id
  courseId: number; //课程id
  creatorId: number; //创建者id
  taskDescription: string; //任务描述
  taskType: string; //任务类型
}

//modelVisible用于开关窗口，默认关闭
const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false
  },
  //课程列表，用于选择任务所属课程
  courseList: {
    type: Array,
    defalt: null
  }
});
//emit用于修改窗口状态
const emit = defineEmits(['update:modelVisible', 'confirm']);

//项目类型
const projectType = ref(store.getters.projectType);

//定义表单
const formRef = ref<FormInstance>();

//初始表单内容全为undefined
const formState: UnwrapRef<FormState> = reactive({
  taskName: undefined,
  projectId: store.getters.projectId,
  courseId: undefined,
  creatorId: store.getters.userId,
  taskDescription: undefined,
  taskType: undefined
});

const onOk = () => {
  formRef.value
    .validateFields()
    .then(async () => {
      //请求后端
      taskDao
        .createTask(toRaw(formState))
        .then((result) => {
          message.success(result.data.msg);
          emit('confirm');
          emit('update:modelVisible', false);
          formRef.value.resetFields();
        })
        .catch((error) => {
          console.error('创建任务失败 createTask', error);
        });
    })
    .catch((error) => {
      console.error('数据验证失败:', error);
    });
};
//表单验证规则
const rules: Record<string, Rule[]> = {
  //验证任务名称是否填写，blur为输入栏失去对焦后判断
  taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
  //验证任务类型是否选择，blur为输入栏失去对焦后判断
  taskType: [{ required: true, message: '请选择任务类型', trigger: 'blur' }],
  courseId: [{ required: true, message: '请选择课程', trigger: 'blur' }]
};
</script>
<style scoped></style>
